<template>
<div>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item><img src="../../assets/3.jpeg" height="200" width="100%"/></van-swipe-item>
    <van-swipe-item><img src="../../assets/8.jpg" height="200" width="100%"/></van-swipe-item>
    <van-swipe-item><img src="../../assets/14.jpg" height="200" width="100%"/></van-swipe-item>
    <van-swipe-item><img src="../../assets/8.jpg" height="200" width="100%"/></van-swipe-item>
  </van-swipe>
  <van-notice-bar
    left-icon="volume-o"
    :text="this.announcements[0].title"
    @click="toAnnouncementList"
  />
  <div class="chenter">
    <div class="categories">
      <van-grid :column-num="3">
        <van-grid-item text="汽车维修" @click="toEnterpriseIntroduction" />
        <van-grid-item text="工程机械维修" @click="toweixiu" />
        <van-grid-item text="商城" @click="toshangcheng" />
      </van-grid>
    </div>
    <div class="recommended-products">
      <van-cell title="推荐商品" is-link @click="showAllProducts">查看全部</van-cell>
      <van-grid :column-num="3">
        <van-grid-item v-for="products in products" :key="products.id" @click="show1(products.id)">
          <img :src="products.photo" alt="商品图片" class="img"/>
          <div class="product">
            <p>{{products.comname | limitText}}</p>
            <p>¥ {{products.price}}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <h3>新闻资讯</h3>
    <div class="zix1" v-for="news in newsList" :key="news.id" @click="goToDetail(news.id)">
      <div class="leftdiv">
        <h4>{{ news.title }}</h4>
        <h5>{{ news.content }}</h5>
        <h6>{{ news.newsTime }}</h6>
      </div>
      <div class="rightdiv">
        <img :src="news.image" height="100%" width="100%"/>
      </div>
    </div>
  </div>
  <van-tabbar v-model="active" class="button">
    <van-tabbar-item name="home" icon="home-o" @click="tiaozhuan1">首页</van-tabbar-item>
    <van-tabbar-item name="search" @click="tiaozhuan2" icon="search">商城</van-tabbar-item>
    <van-tabbar-item name="friends" @click="tiaozhuan3" icon="setting-o">购物车</van-tabbar-item>
    <van-tabbar-item name="setting" @click="tiaozhuan4" icon="friends-o">我的</van-tabbar-item>
  </van-tabbar>
</div>
</template>
<script>

import axios from "axios";

export default {
  name: 'shouyei',
  data() {
    return {
      newsList: [],
      active: 'home',
      announcements: [],
      products: [],
      form:{},
    };
  },
  created() {
    this.findList()
    this.showShop()
    this.findNews()
  },
  filters: {
    limitText: function (value) {
      return value.length > 7 ? value.slice(0, 7) + '...' : value;
    }
  },
  methods: {

    goToDetail(id) {
      this.$router.push({ name: 'NewsDetail', params: { id: id }})
    },
    findNews(){
      axios.get('/news/all').then(response => {
        this.newsList = response.data
      })
    },
    show1(id) {
      localStorage.setItem('id', id)
      this.$router.push('/Bustails')
    },
    showShop() {
      axios.post('/commodity/commodityshow',this.form).then(res => {
        this.products = res.data.data
        console.log(this.products)
        console.log('1111111111111111')
      })
    },
    findList() {
      axios.get('/announcement/list').then(res => {
        console.log(res)
        this.announcements = res.data
      })
    },
    showAllProducts() {
      this.$router.push('/Home');
    },
    toAnnouncementList() {
      this.$router.push('/announcementList');
    },
    toEnterpriseIntroduction() {
      this.$router.push('/enterpriseIntroduction');
    },
    toweixiu(){
      this.$router.push('/Maintenance')
    },
    toshangcheng() {
      this.$router.push('/Home')
    },
    tiaozhuan1() {
      this.$router.push('/shouyei')
    },

    tiaozhuan2() {
      this.$router.push('/Home')
    },
    tiaozhuan3() {
      this.$router.push('/Shoppingcart')
    },
    tiaozhuan4() {
      this.$router.push('/Personal')
    }
  }
}
</script>
<style>
.img{
  width: 100%;
  height: 100%;
}
.zixun{
  width: 100%;
  height: 150px;
}
.van-cell__title{
  display: block;
  text-align: left;
  margin-left: 10px;
}
.van-ellipsis{
  display: block;
  width: 100%;
  height: 60%;
  padding-left: 10px;
}
.van-cell__value {
  text-align: left;
  display: block;
  margin-left: 10px;
}
.zix1 {
  width: 100%;
  height: 130px;
  margin-top: 10px;
  .leftdiv{
    width: 60%;
    height: 130px;
    float: left;
    background-color: #ffffff;
    position: absolute;
    h4 {
      text-align: left;
      margin-top: 2px;
      padding-left: 10px;
    }
    h3 {
      text-align: left;
      margin-top: 20px;
    }
    h6 {
      position: relative;
      text-align: left;
      margin-left: 10px;
      //margin-bottom: 0;
    }
    h5 {
      display: block;
      text-align: left;
      margin-top: 0;
      width: 80%;
      color: #7e7a7a;
      padding-left: 10px;
    }
  }
  .rightdiv{
    width: 40%;
    height: 130px;
    float: right;
    background-color: #bfbbbb;

  }

}
.chenter{
  margin-bottom: 100px;
  width: 100%;
  height: 100%;
  background-color: #F4F5F7;
}
.my-swipe .van-swipe-item {
  margin-top: 10px;
  color: #fff;
  font-size: 20px;
  //line-height: 150px;
  text-align: center;
  background-color: #f6f6f6;
}
.categories {
  margin-bottom: 10px;
}
.categories .van-grid-item__text {
  color: #666;
  font-size: 14px;
}
.recommended-products {
  margin-bottom: 10px;
}

.product {
  text-align: center;
  //background-color: oldlace;
  border-bottom: #bfbbbb 1px solid;
}
</style>
